<template>
  <el-form-item label="默认值" style="margin-bottom: 5px">
    <el-select
      v-model="optionModel.defaultValueType"
      placeholder="请选择"
      @change="emitDefaultValueTypeChange"
    >
      <el-option label="自定义" :value="1" />
      <el-option label="公式计算" :value="2" />
    </el-select>
  </el-form-item>
  <div style="padding-bottom: 10px">
    <div v-if="optionModel.defaultValueType == 1">
      <el-input
        type="text"
        v-model="optionModel.defaultValue"
        @change="emitDefaultValueChange"
        v-if="designer.selectedWidget.type == 'input'"
      ></el-input>
      <el-input
        type="textarea"
        v-model="optionModel.defaultValue"
        @change="emitDefaultValueChange"
        v-else-if="designer.selectedWidget.type == 'textarea'"
      ></el-input>
      <el-input-number
        style="width: 100%"
        v-model="optionModel.defaultValue"
        @change="emitDefaultValueChange"
        v-else-if="designer.selectedWidget.type == 'number'"
      ></el-input-number>

      <optionItems-editor
        :designer="designer"
        :selected-widget="selectedWidget"
        :option-model="optionModel"
        v-else-if="
          designer.selectedWidget.type == 'select' ||
          designer.selectedWidget.type == 'radio' ||
          designer.selectedWidget.type == 'checkbox'
        "
      ></optionItems-editor>

      <!-- <el-select
        v-model="optionModel.defaultValue"
        @change="emitDefaultValueChange"
        v-else-if="
          designer.selectedWidget.type == 'select' ||
          designer.selectedWidget.type == 'radio'
        "
      >
        <el-option label="选项1" :value="1" />
        <el-option label="选项2" :value="2" />
        <el-option label="选项3" :value="3" />
      </el-select>

      <el-select
        v-model="optionModel.defaultValue"
        @change="emitDefaultValueChange"
        v-else-if="
          designer.selectedWidget.type == 'checkbox'
        "
      >
        <el-option label="选项1" :value="1" />
        <el-option label="选项2" :value="2" />
        <el-option label="选项3" :value="3" />
      </el-select> -->

      <!-- <el-select
        v-model="optionModel.defaultValue"
        @change="emitDefaultValueChange"
        
      >
        <el-option label="选项1" :value="1" />
        <el-option label="选项2" :value="2" />
        <el-option label="选项3" :value="3" />
      </el-select> -->
      <el-time-picker
        v-else-if="designer.selectedWidget.type == 'time'"
        v-model="optionModel.defaultValue"
        @change="emitDefaultValueChange"
        :format="optionModel.format"
        value-format="HH:mm:ss"
        style="width: 100%"
      >
      </el-time-picker>

      <el-date-picker
        v-else-if="designer.selectedWidget.type == 'date'"
        :type="optionModel.type"
        v-model="optionModel.defaultValue"
        @change="emitDefaultValueChange"
        :format="optionModel.format"
        :value-format="optionModel.valueFormat"
        style="width: 100%"
      >
      </el-date-picker>

      <el-upload
        v-else-if="designer.selectedWidget.type == 'picture-upload'"
        accept=".jpg,.jpeg,.png,.gif"
        :auto-upload="false"
        v-model:file-list="optionModel.defaultValue"
        list-type="picture-card"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-upload
        v-else-if="designer.selectedWidget.type == 'file-upload'"
        :auto-upload="false"
        v-model:file-list="optionModel.defaultValue"
      >
      </el-upload>
      <!-- <el-input-number style="width:100%;"
        v-model="optionModel.defaultValue"
        @change="emitDefaultValueChange"
        v-else-if="designer.selectedWidget.type == 'number'"
      ></el-input-number> -->
    </div>
    <div v-else-if="optionModel.defaultValueType == 2">
      <ElButton @click="visible = true" style="width: 100%" type="primary"
        >公式编辑器...</ElButton
      >
    </div>
  </div>
  <div class="_fc_formula">
    <ElDialog
      title="公式编辑器"
      v-model="visible"
      :close-on-click-modal="false"
      append-to-body
      class="_fc_formula1"
      top="6vh"
      :draggable="true"
      width="60%"
    >
      <div class="formula_content">
        <div class="formula_content_left">
          <el-tabs v-model="activeName" class="demo-tabs">
            <!-- <el-tab-pane label="表单字段" name="first">
              <div
                class="formFieldBox"
                v-for="(item, index) in formField"
                :key="index"
                @click="insertText(item, 2)"
              >
                {{ item.name }}
              </div>
            </el-tab-pane> -->
            <el-tab-pane label="流程变量" name="second">
              <div
                class="formFieldBox"
                v-for="item in processVariables"
                :key="item"
                @click="insertText(item,1)"
              >
                {{ item }}
              </div>
            </el-tab-pane>
            <el-tab-pane label="计算函数" name="third">
              <el-collapse v-model="activeName1" accordion class="Formula_b">
                <el-collapse-item title="计算函数" :name="1">
                  <template #title>
                    <span>&nbsp;&nbsp;&nbsp;计算函数</span>
                  </template>
                  <div
                    class="formFieldBox"
                    v-for="item in funList"
                    :key="item.name"
                    @click="insertText(item)"
                    @mousemove="funMouseMove(item)"
                  >
                    {{ item.name }}
                  </div>
                </el-collapse-item>
                <el-collapse-item title="日期函数" :name="2">
                  <template #title>
                    <span>&nbsp;&nbsp;&nbsp;日期函数</span>
                  </template>
                  <div
                    class="formFieldBox"
                    v-for="item in timeList"
                    :key="item.show"
                    @click="insertText(item, 1)"
                    @mousemove="funMouseMove(item, 1)"
                  >
                    {{ item.show }}
                  </div>
                </el-collapse-item>
                <el-collapse-item title="格式化函数" :name="3">
                  <template #title>
                    <span>&nbsp;&nbsp;&nbsp;格式化函数</span>
                  </template>
                  <div
                    class="formFieldBox"
                    v-for="item in formatList"
                    :key="item.show"
                    @click="insertText(item, 1)"
                    @mousemove="funMouseMove(item, 1)"
                  >
                    {{ item.show }}
                  </div>
                </el-collapse-item>
              </el-collapse>
              <div class="funExplain">
                <div class="funExplain_title">
                  <span class="formula-name">{{ fun_name }}</span
                  >-方法详解
                </div>
                <div class="funExplain_content">
                  <p>{{ fun_explain }}</p>
                  <p style="width: 100%">
                    用法：<span v-html="fun_usage"></span>
                  </p>
                  <p>示例：<span v-html="fun_example"></span></p>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="formula_content_right">
          <div class="formula_content_right_1">表达式公式计算器</div>
          <div class="formula_content_right_2">
            <el-input
              ref="formula_textarea"
              class="formula_content_right_2_input"
              v-model="optionModel.defaultValueExpression"
              type="textarea"
            />
          </div>
          <div class="formula_content_right_3">
            <div
              class="botton_box"
              v-for="item in btnList"
              :key="item"
              @click="insertText(item)"
            >
              {{ item }}
            </div>
            <!-- <div class="botton_box">+</div>
            <div class="botton_box">-</div>
            <div class="botton_box">/</div>
            <div class="botton_box">*</div>

            <div class="botton_box">avg</div>
            <div class="botton_box">></div>
            <div class="botton_box">&lt;</div>
            <div class="botton_box">==</div>
            <div class="botton_box">!=</div>

            <div class="botton_box">min</div>
            <div class="botton_box">>=</div>
            <div class="botton_box">&lt;=</div>
            <div class="botton_box">&&</div>
            <div class="botton_box">||</div>

            <div class="botton_box">max</div>
            <div class="botton_box">%</div>
            <div class="botton_box">^</div>
            <div class="botton_box">(</div>
            <div class="botton_box">)</div> -->
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <ElButton @click="visible = false" size="small">取 消</ElButton>
          <ElButton type="primary" @click="visible = false" size="small"
            >确 定</ElButton
          >
        </span>
      </template>
    </ElDialog>
  </div>
</template>

<script>
import i18n from "@/utils/i18n";
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin";
import optionItemsEditor from "./optionItems-editor.vue";
import { ref } from "vue";

export default {
  name: "defaultValue-editor1",
  mixins: [i18n, propertyMixin],
  components: { optionItemsEditor },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  data() {
    return {
      btnList: [
        "sum",
        "+",
        "-",
        "*",
        "/",
        "avg",
        ">",
        "<",
        "==",
        "!=",
        "min",
        ">=",
        "<=",
        "&&",
        "||",
        "max",
        "%",
        "^",
        "(",
        ")",
      ],
      fun_name: "",
      fun_explain: "",
      fun_usage: "",
      fun_example: "",
      visible: false,
      formula_textarea: "",
      formField: [],
      processVariables: [
        "发起人"
      ],
      funList: [
        {
          name: "ABS",
          explain: "获取一个数的绝对值。",
          usage: '<span class="formula-name">ABS</span>(数字)。',
          example:
            '<span class="formula-name">ABS</span>(-8)可以返回8，也就是-8的绝对值。',
        },
        {
          name: "AVERAGE",
          explain: "获取一组数值的算术平均值。",
          usage: '<span class="formula-name">AVERAGE</span>(数字1,数字2,...)。',
          example:
            '<span class="formula-name">AVERAGE</span>(<span class="formula-filed-name">语文成绩</span>,<span class="formula-filed-name">数学成绩</span>,<span class="formula-filed-name">英语成绩</span>)返回三门课程的平均分。',
        },
        {
          name: "CEILING",
          explain: "将数字增大到最接近原值的指定因数的倍数。",
          usage: '<span class="formula-name">CEILING</span>(数字,因数)。',
          example:
            '<span class="formula-name">CEILING</span>(7,6)返回12，因为12比7大的同时，也是6的倍数中最接近7的数字。',
        },
        {
          name: "COS",
          explain: "计算角度的余弦值，计算时需要先将角度转化为弧度。",
          usage: '<span class="formula-name">COS</span>(弧度)。',
          example:
            '<span class="formula-name">COS</span>(<span class="formula-name">RADIANS</span>60)返回0.5。',
        },
        {
          name: "COT",
          explain: "计算角度的余切值，计算时需要先将角度转化为弧度。",
          usage: '<span class="formula-name">COT</span>(弧度)。',
          example:
            '<span class="formula-name">COT</span>(<span class="formula-name">RADIANS</span>45)返回1。',
        },
        {
          name: "COUNT",
          explain: "获取参数的数量。",
          usage: '<span class="formula-name">COUNT</span>(值,值,...)。',
          example:
            '<span class="formula-name">COUNT</span>(7,6)(小明,小王,小张,小李)返回4，也就是人员的数量。',
        },
        {
          name: "COUNTIF",
          explain: "获取数组中满足条件的参数个数。",
          usage: '<span class="formula-name">COUNTIF</span>(数组,"条件")。',
          example:
            '<span class="formula-name">COUNTIF</span>([1,2,3,4],">2")，可得到1,2,3,4中大于2的数字数量，结果为2。',
        },
        {
          name: "FIXED",
          explain: "将数字舍入到指定的小数位数并输出为文本。",
          usage: '<span class="formula-name">FIXED</span>(数字,小数位数)。',
          example:
            '<span class="formula-name">FIXED</span>(3.1415,2)返回"3.14"。',
        },
        {
          name: "FLOOR",
          explain: "将数字减小到最接近原值的指定因数的倍数。",
          usage: '<span class="formula-name">FLOOR</span>(数字,因数)。',
          example:
            '<span class="formula-name">FLOOR</span>(7,6)返回6，因为6比7小的同时，也是6的倍数中最接近7的数字。',
        },
        {
          name: "INT",
          explain: "获取一个数的整数部分。",
          usage: '<span class="formula-name">INT</span>(数字)。',
          example:
            '<span class="formula-name">INT</span>(3.1415)返回3，也就是3.1415的整数部分。',
        },
        {
          name: "LARGE",
          explain: "将数字增大到最接近原值的指定因数的倍数。",
          usage: '<span class="formula-name">LARGE</span>(数组,k)。',
          example:
            '<span class="formula-name">LARGE</span>(<span class="formula-filed-name">学生成绩</span>,<span class="formula-filed-name">数学成绩</span>,1)返回子表单"学生成绩"中排名第1的"数学成绩"',
        },
        {
          name: "LOG",
          explain: "根据指定底数返回数字的对数。",
          usage: '<span class="formula-name">LOG</span>(数字,底数)。',
          example:
            '<span class="formula-name">LOG</span>(100,10)返回2，也就是以10为底数100的对数。',
        },
        {
          name: "MAX",
          explain: "获取一组数值的最大值。",
          usage: '<span class="formula-name">MAX</span>(数字1,数字2,...)。',
          example:
            '<span class="formula-name">MAX</span>(<span class="formula-filed-name">语文成绩</span>,<span class="formula-filed-name">数学成绩</span>,<span class="formula-filed-name">英语成绩</span>)返回三门课程中的最高分。',
        },
        {
          name: "MIN",
          explain: "获取一组数值的最小值。",
          usage: '<span class="formula-name">MIN</span>(数字1,数字2,...)。',
          example:
            '<span class="formula-name">MIN</span>(<span class="formula-filed-name">语文成绩</span>,<span class="formula-filed-name">数学成绩</span>,<span class="formula-filed-name">英语成绩</span>)返回三门课程中的最低分。',
        },
        {
          name: "MOD",
          explain: "获取两数相除的余数。",
          usage: '<span class="formula-name">MOD</span>(被除数,除数)。',
          example:
            '<span class="formula-name">MOD</span>(4,3)返回1，也就是4/3的余数。',
        },
        {
          name: "POWER",
          explain: "获取数字乘幂的结果。",
          usage: '<span class="formula-name">POWER</span>(数字,指数)。',
          example:
            '<span class="formula-name">POWER</span>(3，2)返回9，也就是3的2次方。',
        },
        {
          name: "PRODUCT",
          explain: "获取一组数值的乘积。",
          usage: '<span class="formula-name">PRODUCT</span>(数字1,数字2,...)。',
          example:
            '<span class="formula-name">PRODUCT</span>(<span class="formula-filed-name">单价</span>,<span class="formula-filed-name">数量</span>)获取总价，也就是单价和数量的乘积。',
        },
        {
          name: "RADIANS",
          explain: "将角度转为弧度。",
          usage: '<span class="formula-name">RADIANS</span>(角度)。',
          example:
            '<span class="formula-name">RADIANS</span>(180)，返回3.14159265。',
        },
        {
          name: "RAND",
          explain: "返回大于等于0且小于1的均匀分布随机实数。",
          usage: '<span class="formula-name">RAND</span>()。',
          example: '<span class="formula-name">RAND</span>()返回0.424656。',
        },
        {
          name: "ROUND",
          explain: "将数字四舍五入到指定的位数。",
          usage: '<span class="formula-name">ROUND</span>(数字,数字位数)。',
          example:
            '<span class="formula-name">ROUND</span>(3.1485,2)返回3.15。',
        },
        {
          name: "SIN",
          explain: "计算角度的正弦值，计算时需要先将角度转化为弧度。",
          usage: '<span class="formula-name">SIN</span>(弧度)。',
          example:
            '<span class="formula-name">SIN</span>(<span class="formula-name">RADIANS</span>(30))，返回0.5。',
        },
        {
          name: "SMALL",
          explain: "返回数据集中第k个最小值。",
          usage: '<span class="formula-name">SMALL</span>(数组,k)。',
          example:
            '<span class="formula-name">SMALL</span>(<span class="formula-filed-name">学生成绩</span>,<span class="formula-filed-name">数学成绩</span>,1)返回子表单"学生成绩"中排名倒数第一的"数学成绩"。',
        },
        {
          name: "SQRT",
          explain: "获取一个数字的正平方根。",
          usage: '<span class="formula-name">SQRT</span>(数字)。',
          example:
            '<span class="formula-name">SQRT</span>(9)返回3，也就是9的正平方根。',
        },
        {
          name: "SUM",
          explain: "获取一组数值的总和。",
          usage: '<span class="formula-name">RADIANS</span>(数字1,数字2,...)。',
          example:
            '<span class="formula-name">RADIANS</span>(<span class="formula-filed-name">语文成绩</span>,<span class="formula-filed-name">数学成绩</span>,<span class="formula-filed-name">英语成绩</span>,)返回三门课程的总分。',
        },
        {
          name: "SUMPRODUCT",
          explain: "将数组间对应的元素相乘，并返回乘积之和，适用于加权求和。",
          usage: '<span class="formula-name">SUMPRODUCT</span>(数组,数组...)。',
          example:
            '<span class="formula-name">SUMPRODUCT</span>([1,2,3],[0.1,0.2,0.3])返回1.4，也就是 1×0.1 + 2×0.2 + 3×0.3的值。',
        },
        {
          name: "SUMIF",
          explain: "使满足单一条件的数字相加并返回和。",
          usage:
            '<span class="formula-name">SUMIF</span>(数组_判断区域, 逻辑表达式, 数组_求和区域)。',
          example:
            '<span class="formula-name">SUMIF</span>([A,B,C], "A", [1,1,1])，可得到A种类对应的数字求和结果为2。',
        },
        {
          name: "SUMIFS",
          explain: "使同时满足多个条件的数字相加并返回和。",
          usage:
            '<span class="formula-name">SUMIFS</span>(数组_求和区域, 数组_判断区域1, 逻辑表达式1, 数组_判断区域2, 逻辑表达式2, ...)。',
          example:
            '<span class="formula-name">SUMIFS</span>([1,1,1], [A,B,C], "A", [a,b,c], "a")，可得到既满足A种类又满足a种类对应的数字求和结果为1。',
        },
        {
          name: "TAN",
          explain: "计算角度的正切值，计算时需要先将角度转化为弧度。",
          usage: '<span class="formula-name">TAN</span>(弧度)。',
          example:
            '<span class="formula-name">TAN</span>(<span class="formula-name">RADIANS</span>(45))，返回1。',
        },
        {
          name: "CONCATENATE",
          explain: "将多个文本合并成一个文本。",
          usage:
            '<span class="formula-name">CONCATENATE</span>(文本1,文本2,...)。',
          example:
            '<span class="formula-name">CONCATENATE</span>("三年二班","周杰伦")会返回"三年二班周杰伦"。',
        },
        {
          name: "IF",
          explain:
            "判断一个条件能否满足；如果满足返回一个值，如果不满足则返回另外一个值。",
          usage:
            '<span class="formula-name">IF</span>(逻辑表达式,为true时返回的值,为false时返回的值)。',
          example:
            '<span class="formula-name">IF</span>(<span class="formula-filed-name">成绩</span>>60,"及格","不及格")，当成绩>60时返回及格，否则返回不及格。',
        },
        {
          name: "MAPX",
          explain: "用来进行跨表单取数的高级函数。",
          usage:
            '<span class="formula-name">MAPX</span>(operation,map_value,map_field,result_field)。',
          example: "略。",
        },
        {
          name: "CHAR",
          explain: "将计算机字符集的数字代码转换为对应字符。",
          usage: '<span class="formula-name">CHAR</span>(数字)。',
          example: '<span class="formula-name">CHAR</span>(10)会返回换行字符。',
        },
        {
          name: "EXACT",
          explain: "比较两个文本是否完全相同，返回布尔值",
          usage: '<span class="formula-name">EXACT</span>(文本1, 文本2)。',
          example:
            '<span class="formula-name">EXACT</span>(<span class="formula-filed-name">号码</span>,<span class="formula-filed-name">手机号</span>)，如果两者相同，返回true，如果不相同，返回false。',
        },
        {
          name: "IP",
          explain: "获取当前用户的ip地址。",
          usage: '<span class="formula-name">IP</span>()。',
          example: "略",
        },
        {
          name: "ISEMPTY",
          explain: "用来判断值是否为空文本、空对象或者空数组。",
          usage: '<span class="formula-name">ISEMPTY</span>(文本)。',
          example: "略",
        },
        {
          name: "JOIN",
          explain: "用指定连接符将数组的值连成文本。",
          usage: '<span class="formula-name">JOIN</span>(数组, "连接符")。',
          example:
            '<span class="formula-name">JOIN</span>(["销售部","商务部"], "-")，则返回值为"销售部-商务部"。',
        },
        {
          name: "LEFT",
          explain: "从一个文本的第一个字符开始返回指定个数的字符。",
          usage: '<span class="formula-name">LEFT</span>(文本,文本长度)。',
          example:
            '<span class="formula-name">LEFT</span>("三年二班",2)返回"三年"，也就是"三年二班"的从左往右的前2个字符。',
        },
        {
          name: "LEN",
          explain: "获取一个数字的正平方根。",
          usage: '<span class="formula-name">LEN</span>(文本)。',
          example:
            '<span class="formula-name">LEN</span>("朝辞白帝彩云间")返回7，因为这句诗中有7个字符。',
        },
        {
          name: "LOWER",
          explain: "将一个文本中的所有大写字母转换为小写字母。",
          usage: '<span class="formula-name">LOWER</span>(文本)。',
          example:
            '<span class="formula-name">LOWER</span>("JAYZ")返回"jayz"。',
        },
        {
          name: "MID",
          explain: "返回文本中从指定位置开始的指定数目的字符。",
          usage:
            '<span class="formula-name">MID</span>(文本,开始位置_数字,指定数目)。',
          example:
            '<span class="formula-name">MID</span>("应用定制工具",3,2)返回"定制"。',
        },
        {
          name: "REPLACE",
          explain: "根据指定的字符数，将部分文本替换为不同的文本。",
          usage:
            '<span class="formula-name">SQRT</span>(文本,开始位置,替换长度,新文本)。',
          example:
            '<span class="formula-name">SQRT</span>("应用定制工具",1,6,"企业数据管理平台")返回"企业数据管理平台"。',
        },
        {
          name: "REPT",
          explain: "将文本重复一定次数。",
          usage: '<span class="formula-name">REPT</span>(文本,重复次数)。',
          example:
            '<span class="formula-name">REPT</span>("应用定制工具",2)返回"应用定制工具应用定制工具"。',
        },
        {
          name: "RIGHT",
          explain: "获取由给定文本右端指定数量的字符构成的文本值。",
          usage: '<span class="formula-name">RIGHT</span>(文本,文本长度)。',
          example:
            '<span class="formula-name">RIGHT</span>("三年二班周杰伦",3)返回"周杰伦"，也就是"三年二班周杰伦"从右往左的前3个字符。',
        },
        {
          name: "RMBCAP",
          explain: "将金额小写转换为人民币大写金额形式。",
          usage: '<span class="formula-name">RMBCAP</span>(数字)。',
          example:
            '<span class="formula-name">RMBCAP</span>(12.23)返回人民币壹拾贰元贰角叁分。',
        },
        {
          name: "SEARCH",
          explain: "获取文本1在文本2中的开始位置。",
          usage: '<span class="formula-name">SEARCH</span>(文本1,文本2)。',
          example:
            '<span class="formula-name">SEARCH</span>("2016","定制2016")返回3。',
        },
        {
          name: "SPLIT",
          explain: "将文本按指定分割符分割成数组。",
          usage: '<span class="formula-name">SPLIT</span>(文本,分隔符_文本)。',
          example:
            '<span class="formula-name">SPLIT</span>("应用定制-工具","-")返回"应用定制","工具"。',
        },
        {
          name: "TEXT",
          explain: "将数字转化成文本。",
          usage: '<span class="formula-name">TEXT</span>(数字)。',
          example:
            '<span class="formula-name">TEXT</span>(3.1415)返回"3.1415"。',
        },
        {
          name: "TRIM",
          explain: "删除文本首尾的空格。",
          usage: '<span class="formula-name">TRIM</span>(文本)。',
          example:
            '<span class="formula-name">TRIM</span>(" 应用定制工具 ")返回"应用定制工具"。',
        },
        {
          name: "UNION",
          explain: "合并多个文本数组，重复文本只显示一次。",
          usage:
            '<span class="formula-name">UNION</span>(文本1，文本2，文本3，文本4)。',
          example:
            '<span class="formula-name">UNION</span>("张三","李四","王五","张三","李四")返回值为["张三","李四","王五"]。',
        },
        {
          name: "UPPER",
          explain: "将一个文本中的所有小写字母转换为大写字母。",
          usage: '<span class="formula-name">UPPER</span>(文本)。',
          example:
            '<span class="formula-name">UPPER</span>("应用定制工具",3,2)返回"定制"。',
        },
        {
          name: "VALUE",
          explain: "将文本转化为数字。",
          usage: '<span class="formula-name">VALUE</span>(文本)。',
          example:
            '<span class="formula-name">VALUE</span>("3.1415")返回3.1415。',
        },
        {
          name: "INDEX",
          explain: "返回数组中指定位置的值，位置用整数表示。",
          usage: '<span class="formula-name">INDEX</span>(数组,位置)。',
          example:
            '<span class="formula-name">INDEX</span>([1,2,3],0)返回数组中正数第1个值。',
        },
        {
          name: "UUID",
          explain: "随机码生成器。可适用于随机流水号的使用场景等。",
          usage: '<span class="formula-name">UUID</span>()。',
          example: "略。",
        },
      ],
      formatList: [
        {
          name: "<%=DateTime.Today.DayOfWeek%>",
          show: "今天(星期几)",
          explain: "获取今天星期几。",
          usage:
            '<span class="formula-name"><%=DateTime.Today.DayOfWeek%></span>。',
          example:
            '<span class="formula-name"><%=DateTime.Today.DayOfWeek%></span>返回今天是星期几。',
        },
        {
          name: "<%=(DateTime.Today - TimeSpan.FromDays(1)).DayOfWeek%>",
          show: "昨天(星期几)",
          explain: "获取昨天星期几。",
          usage:
            '<span class="formula-name"><%=(DateTime.Today - TimeSpan.FromDays(1)).DayOfWeek%></span>。',
          example:
            '<span class="formula-name"><%=(DateTime.Today - TimeSpan.FromDays(1)).DayOfWeek%></span>返回昨天是星期几。',
        },
        {
          name: "<%=(DateTime.Today - TimeSpan.FromDays(2)).DayOfWeek%>",
          show: "前天(星期几)",
          explain: "获取前天星期几。",
          usage:
            '<span class="formula-name"><%=(DateTime.Today - TimeSpan.FromDays(2)).DayOfWeek%></span>。',
          example:
            '<span class="formula-name"><%=(DateTime.Today - TimeSpan.FromDays(2)).DayOfWeek%></span>返回前天是星期几。',
        },
        {
          name: "<%=(DateTime.Today + TimeSpan.FromDays(1)).DayOfWeek%>",
          show: "明天(星期几)",
          explain: "获取明天星期几。",
          usage:
            '<span class="formula-name"><%=(DateTime.Today + TimeSpan.FromDays(1)).DayOfWeek%></span>。',
          example:
            '<span class="formula-name"><%=(DateTime.Today + TimeSpan.FromDays(1)).DayOfWeek%></span>返回明天是星期几。',
        },
        {
          name: "<%=(DateTime.Today + TimeSpan.FromDays(2)).DayOfWeek%>",
          show: "后天(星期几)",
          explain: "获取后天星期几。",
          usage:
            '<span class="formula-name"><%=(DateTime.Today + TimeSpan.FromDays(2)).DayOfWeek%></span>。',
          example:
            '<span class="formula-name"><%=(DateTime.Today + TimeSpan.FromDays(2)).DayOfWeek%></span>返回后天是星期几。',
        },
        {
          name: '.ToString("yyyy-MM-dd")',
          show: "年-月-日",
          explain: "将日期对象转为'yyyy-MM-dd'的格式显示。",
          usage: '<span class="formula-name">.ToString("yyyy-MM-dd")</span>。',
          example:
            '<span class="formula-name">.ToString("yyyy-MM-dd")</span>将日期对象以"yyyy-MM-dd"的格式返回。',
        },
        {
          name: '.ToString("yyyy-MM-dd HH")',
          show: "年-月-日 时",
          explain: "将日期对象转为'yyyy-MM-dd HH'的格式显示。",
          usage:
            '<span class="formula-name">.ToString("yyyy-MM-dd HH")</span>。',
          example:
            '<span class="formula-name">.ToString("yyyy-MM-dd HH")</span>将日期对象以"yyyy-MM-dd HH"的格式返回。',
        },
        {
          name: '.ToString("yyyy-MM-dd HH:mm")',
          show: "年-月-日 时:分",
          explain: "将日期对象转为'yyyy-MM-dd HH:mm'的格式显示。",
          usage:
            '<span class="formula-name">.ToString("yyyy-MM-dd HH:mm")</span>。',
          example:
            '<span class="formula-name">.ToString("yyyy-MM-dd HH:mm")</span>将日期对象以"yyyy-MM-dd HH:mm"的格式返回。',
        },
        {
          name: '.ToString("yyyy-MM-dd HH:mm:ss")',
          show: "年-月-日 时:分:秒",
          explain: "将日期对象转为'yyyy-MM-dd HH:mm:ss'的格式显示。",
          usage:
            '<span class="formula-name">.ToString("yyyy-MM-dd HH:mm:ss")</span>。',
          example:
            '<span class="formula-name">.ToString("yyyy-MM-dd HH:mm:ss")</span>将日期对象以"yyyy-MM-dd HH:mm:ss"的格式返回。',
        },
      ],
      timeList: [
        {
          name: "<%=DateTime.Today%>",
          show: "今天",
          explain: "获取获取今天的日期对象。",
          usage: '<span class="formula-name"><%=DateTime.Today%></span>。',
          example:
            '<span class="formula-name"><%=DateTime.Today%></span>返回今天的日期对象。',
        },
        {
          name: "<%=DateTime.Today - TimeSpan.FromDays(1)%>",
          show: "昨天",
          explain: "获取获取昨天的日期对象。",
          usage:
            '<span class="formula-name"><%=DateTime.Today - TimeSpan.FromDays(1)%></span>。',
          example:
            '<span class="formula-name"><%=DateTime.Today - TimeSpan.FromDays(1)%></span>返回昨天的日期对象。',
        },
        {
          name: "<%=DateTime.Today - TimeSpan.FromDays(2)%>",
          show: "前天",
          explain: "获取获取前天的日期对象。",
          usage:
            '<span class="formula-name"><%=DateTime.Today - TimeSpan.FromDays(2)%></span>。',
          example:
            '<span class="formula-name"><%=DateTime.Today - TimeSpan.FromDays(2)%></span>返回前天的日期对象。',
        },
        {
          name: "<%=DateTime.Today + TimeSpan.FromDays(1)%>",
          show: "明天",
          explain: "获取获取明天的日期对象。",
          usage:
            '<span class="formula-name"><%=DateTime.Today + TimeSpan.FromDays(1)%></span>。',
          example:
            '<span class="formula-name"><%=DateTime.Today + TimeSpan.FromDays(1)%></span>返回明天的日期对象。',
        },
        {
          name: "<%=DateTime.Today + TimeSpan.FromDays(2)%>",
          show: "后天",
          explain: "获取获取后天的日期对象。",
          usage:
            '<span class="formula-name"><%=DateTime.Today + TimeSpan.FromDays(2)%></span>。',
          example:
            '<span class="formula-name"><%=DateTime.Today + TimeSpan.FromDays(2)%></span>返回后天的日期对象。',
        },
        {
          name: "<%=DateTime.Today.Year%>",
          show: "今年",
          explain: "获取获取今年的日期对象。",
          usage: '<span class="formula-name"><%=DateTime.Today.Year%></span>。',
          example:
            '<span class="formula-name"><%=DateTime.Today.Year%></span>返回今年的日期对象。',
        },
        {
          name: "( - date2).TotalDays",
          show: "时间差(天)",
          explain: "获取两个时间点之间所差天数。",
          usage: '<span class="formula-name">( - date2).TotalDays</span>。',
          example:
            '<span class="formula-name">( - date2).TotalDays</span>返回两个时间点之间所差天数。',
        },
        {
          name: "( - date2).TotalHours",
          show: "时间差(小时)",
          explain: "获取两个时间点之间所差小时数。",
          usage: '<span class="formula-name">( - date2).TotalHours</span>。',
          example:
            '<span class="formula-name">( - date2).TotalHours</span>返回两个时间点之间所差小时数。',
        },
        {
          name: "( - date2).TotalMinutes",
          show: "时间差(分)",
          explain: "获取两个时间点之间所差分钟数。",
          usage: '<span class="formula-name">( - date2).TotalMinutes</span>。',
          example:
            '<span class="formula-name">( - date2).TotalMinutes</span>返回两个时间点之间所差分钟数。',
        },
        {
          name: "( - date2).TotalSeconds",
          show: "时间差(秒)",
          explain: "获取两个时间点之间所差秒数。",
          usage: '<span class="formula-name">( - date2).TotalSeconds</span>。',
          example:
            '<span class="formula-name">( - date2).TotalSeconds</span>返回两个时间点之间所差秒数。',
        },
      ],
      activeName: "third",
      activeName1: 1,
      editor: null,
      visible: false,
    };
  },
  watch: {
    "designer.widgetList": {
      handler(val) {
        // console.log("@@@!!!", val);
        this.formField = [];
        val.map((item) => {
          switch (item.type) {
            case "grid":
              item.cols.map((item1) => {
                if (item1.type == "grid-col") {
                  item1.widgetList.map((item2) => {
                    this.formField.push({
                      name: item2.options.label,
                      type: item2.type,
                    });
                  });
                }
              });
              break;
            case "table":
              item.rows.map((item1) => {
                item1.cols.map((item2) => {
                  item2.widgetList.map((item3) => {
                    this.formField.push({
                      name: item3.options.label,
                      type: item3.type,
                    });
                  });
                });
              });
              break;
            case "tab":
              item.tabs.map((item1) => {
                item1.widgetList.map((item2) => {
                  this.formField.push({
                    name: item2.options.label,
                    type: item2.type,
                  });
                });
              });
              break;
            default:
              this.formField.push({
                name: item.options.label,
                type: item.type,
              });
              break;
          }
        });
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    insertText(data, type) {
      let insertedText = "";
      if (data.name) {
        if (type == 1) {
          insertedText = data.name;
        } else if (type == 2) {
          insertedText = `{${data.name}}`;
        } else {
          insertedText = data.name + "()";
        }
      } else {
        insertedText = data;
      }
      const inputElement = this.$refs.formula_textarea.$refs.textarea; // 获取输入框的DOM元素
      const startPos = inputElement.selectionStart; // 获取光标起始位置
      const endPos = inputElement.selectionEnd; // 获取光标结束位置

      // console.log(this.optionModel);
      // console.log(this.optionModel.defaultValueExpression);
      const updatedValue =
        this.optionModel.defaultValueExpression.substring(0, startPos) +
        insertedText +
        this.optionModel.defaultValueExpression.substring(endPos);

      this.optionModel.defaultValueExpression = updatedValue; // 更新输入框的值
      this.$nextTick(() => {
        // 将光标重新设置到插入内容的后面
        inputElement.selectionStart = startPos + insertedText.length;
        inputElement.selectionEnd = startPos + insertedText.length;
        inputElement.focus(); // 让输入框获取焦点
      });
    },
    funMouseMove(data, type) {
      if (type == 1) {
        this.fun_name = data.show;
      } else {
        this.fun_name = data.name;
      }
      this.fun_explain = data.explain;
      this.fun_usage = data.usage;
      this.fun_example = data.example;
    },
  },
  mounted() {
    // console.log("this.designer", this.designer);
  },
};
</script>

<style>
.formula-name {
  color: #c643e0;
}
.formula-filed-name {
  background: #e6f7fa;
  border-radius: 3px;
  color: #00aed1;
  padding: 2px 4px;
}
.funExplain .funExplain_title {
  width: 100%;
  padding: 3px 10px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.funExplain .funExplain_content {
  padding: 0px 10px;
  padding-top: 5px;
  overflow: auto;
  height: 124px;
}
.funExplain .funExplain_content p {
  margin: 5px 0;
  width: 100%;
}
._fc_formula {
  width: 100%;
}
._fc_formula1 .el-tabs__nav {
  margin-left: 10px;
}
.Formula_b {
  height: 400px;
  overflow: hidden;
}
.Formula_b .el-collapse-item__wrap {
  max-height: 257px;
  overflow: auto;
}
.formFieldBox {
  cursor: pointer;
  padding: 5px;
  padding-left: 20px;
}
.formFieldBox:hover {
  background: #ddd;
}

._fc_formula1 .el-tabs__header {
  margin: 0;
}
._fc_formula1 .el-dialog__body {
  padding-top: 0;
}

.formula_content {
  display: flex;
}
.formula_content_left {
  border: 1px solid #ccc;
  box-sizing: border-box;
  height: 600px;
  width: 250px;
}
.formula_content_right {
  flex: 1;
  /* border: 1px solid #ccc; */
  box-sizing: border-box;
  height: 600px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}
.formula_content_right_1 {
  box-sizing: border-box;
  padding: 5px 10px;
  background: #e8f4fe;
  /* font-style: italic; */
  font-weight: bold;
  /* color: #000; */
}
.formula_content_right_2 {
  /* height: 100%; */
  flex-grow: 1;
}
.formula_content_right_2_input {
  height: 100%;
  border: 0;
}
.formula_content_right_2_input .el-textarea__inner {
  height: 100%;
}
.formula_content_right_3 {
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(4, 25%);
  cursor: pointer;
}
.botton_box {
  text-align: center;
  padding: 3px 0;
  border: 1px solid #e4e4e4;
  background: #f8f9fa;
}
</style>
